<template>
  <div class="page-content">
    <hy-table
      :listData="dataList"
      v-bind="contentTableConfig"
      :list-count="listCount"
      v-model:page="pageInfo"
    >
      <!-- 1.header中的插槽 -->
      <template #headerHandler>
        <template v-if="MyisCreate">
          <el-button type="primary" size="medium" @click="handelNewClick"
            >新建</el-button
          ></template
        >
        <!-- 控制一个选现框 -->
        <template v-if="MyisSelect">
          <el-select
            v-model="Selectvalue"
            class="m-2"
            placeholder="请选择"
            size="large"
          >
            <el-option
              v-for="item in MyselectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select
        ></template>
        <!-- 控制一个选现框 -->
        <template v-if="MyisSelectOne">
          <el-select
            v-model="SelectvalueOne"
            class="m-2"
            placeholder="请选择"
            size="large"
          >
            <el-option
              v-for="item in MyselectOptionsOne"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select
        ></template>
        <!-- 控制一个时间选取器 -->
        <template v-if="MyisSelectTime">
          <el-date-picker
            v-model="SelectvalueTime"
            type="datetime"
            placeholder="Pick a Date"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
        </template>
      </template>

      <!-- 2.列中的插槽 -->
      <!-- 控制时间的格式 -->
      <!-- 2.列中的插槽 -->
      <!-- 控制时间的格式 -->
      <template #create_time="scope">
        <span>{{
          $filters.formatTime(
            scope.row.create_time ||
              scope.row.createTime ||
              scope.row.updateTiem ||
              scope.row.creatTime ||
              scope.row.nullItem
          )
        }}</span>
      </template>

      <template #thatVeryDay="scope">
        <span>{{
          $filters.formatTime(
            scope.row.thatVeryDay ||
              scope.row.updateTime ||
              scope.row.updateTiem ||
              ''
          )
        }}</span>
      </template>
      <template #year_end_time="scope">
        <template v-if="scope.row.year_end_time">
          <span>{{ $filters.formatTime(scope.row.year_end_time) }}</span>
        </template>
        <template v-else><span>还未开通</span> </template>
      </template>
      <template #year_start_time="scope">
        <template v-if="scope.row.year_start_time">
          <span>{{ $filters.formatTime(scope.row.year_start_time) }}</span>
        </template>
        <template v-else><span>还未开通</span> </template>
      </template>
      <!-- 控制编辑 -->
      <template #handler="scope">
        <div class="handle-btns">
          <template v-if="MyEdshow">
            <el-button
              @click="handelEditClick(scope.row)"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              :disabled="Selectvalue"
              >编辑</el-button
            ></template
          >
          <template v-if="MyDeshow">
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="text"
              @click="handeldeleteClick(scope.row)"
              >删除</el-button
            ></template
          >
          <template v-if="Myisactions">
            <el-button
              @click="handelRoterClick(scope.row)"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              >修改</el-button
            >
          </template>
        </div>
      </template>
      <!-- //动态插槽 -->
      <!-- 在page-content中动态插入剩余的插槽 -->
      <!-- 外面的template是引用Tbale里面的插槽  -->

      <template
        v-for="item in otherPropsSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <!-- 这里是新建插槽给外面插入 -->
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </hy-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from 'vue'
import { useStore } from '@/store'
import router from '@/router'
import HyTable from '@/base-ui/table'
import cache from '@/utils/cache'
import dayjs from 'dayjs'
export default defineComponent({
  components: {
    HyTable
  },

  props: {
    contentTableConfig: {
      type: Object,
      require: true
    },
    pageName: {
      type: String,
      required: true
    },
    Edshow: {
      type: Boolean,
      default: false
    },
    Deshow: {
      type: Boolean,
      default: false
    },
    isCreate: {
      type: Boolean,
      default: false
    },
    isSelect: {
      type: Boolean,
      default: false
    },
    isSelectOne: {
      type: Boolean,
      default: false
    },
    selectOptions: {
      type: Object,
      default: () => ({})
    },
    selectOptionsOne: {
      type: Object,
      default: () => ({})
    },
    isSelectTime: {
      type: Boolean,
      default: false
    },
    actions: {
      type: Boolean,
      default: false
    }
  },
  emits: ['newBtnClick', 'editBtnClick'],
  setup(props, { emit }) {
    const store = useStore()
    const Selectvalue = ref(0)
    const SelectvalueOne = ref(1)
    let time = dayjs()

    const SelectvalueTime = ref(time.format('YYYY-MM-DD hh:mm:ss'))
    //值发生改变 是发送网络请求

    const MyEdshow = computed(() => {
      return props.Edshow
    })
    const MyDeshow = computed(() => {
      return props.Deshow
    })
    const MyisCreate = computed(() => {
      return props.isCreate
    })
    const MyisSelect = computed(() => {
      return props.isSelect
    })
    const MyselectOptions = computed(() => {
      return props.selectOptions
    })
    const MyisSelectOne = computed(() => {
      return props.isSelectOne
    })
    const MyselectOptionsOne = computed(() => {
      return props.selectOptionsOne
    })
    const MyisSelectTime = computed(() => {
      return props.isSelectTime
    })
    const Myisactions = computed(() => {
      return props.actions
    })
    //pageinfo双向绑定的数据 用于控制当前页 和一页多少条
    const pageInfo = ref({ currentPage: 1, pageSize: 5 })

    const getPageData = (value: any = {}) => {
      //首先看他有没有发送网络的权限
      store.dispatch('system/getPageListAction', {
        pageName: props.pageName,
        queryInfo: {
          pageNum: pageInfo.value.currentPage,
          pageSize: pageInfo.value.pageSize,
          //对传过来的附加值进行解构 解构后这里就会多像这样的数据 name：'why' 以传值
          ...value
        }
      })
    }
    if (props.pageName == 'leave/list') {
      if (cache.getCache('Selectvalue') != null) {
        Selectvalue.value = cache.getCache('Selectvalue')
        getPageData({ type: cache.getCache('Selectvalue') })
      } else {
        getPageData({ type: 0 })
      }
    } else if (props.pageName == 'newuser/list') {
      if (cache.getCache('Selectvalue') != null) {
        Selectvalue.value = cache.getCache('Selectvalue')
        getPageData({
          type: cache.getCache('Selectvalue')
        })
      } else {
        getPageData({ type: 0 })
      }
    } else if (props.pageName == 'make/list') {
      if (
        cache.getCache('Selectvalue') != null &&
        cache.getCache('SelectvalueOne') != null &&
        cache.getCache('SelectvaluTime') != null
      ) {
        Selectvalue.value = cache.getCache('Selectvalue')
        getPageData({
          type: cache.getCache('Selectvalue'),
          classify: cache.getCache('SelectvalueOne'),
          thatVeryDay: cache.getCache('SelectvalueTime')
        })
      } else {
        getPageData({
          type: Selectvalue.value,
          classify: SelectvalueOne.value,
          thatVeryDay: dayjs().format('YYYY-MM-DD hh:mm:ss')
        })
      }
    } else if (props.pageName == 'evaluate') {
      if (cache.getCache('Selectvalue') != null) {
        Selectvalue.value = cache.getCache('Selectvalue')
        getPageData({
          type: cache.getCache('Selectvalue')
        })
      } else {
        getPageData({ type: 0 })
      }
    } else {
      getPageData('')
    }

    //值发生改变 是发送网络请求
    watch(pageInfo, () => {
      if (props.pageName == 'leave/list') {
        if (cache.getCache('Selectvalue') != null) {
          getPageData({ type: cache.getCache('Selectvalue') })
        } else {
          getPageData({ type: 0 })
        }
      } else if (props.pageName == 'newuser/list') {
        if (cache.getCache('Selectvalue') != null) {
          Selectvalue.value = cache.getCache('Selectvalue')
          getPageData({
            type: cache.getCache('Selectvalue')
          })
        } else {
          getPageData({ type: 0 })
        }
      } else if (props.pageName == 'make/list') {
        if (
          cache.getCache('Selectvalue') != null &&
          cache.getCache('SelectvalueOne') != null &&
          cache.getCache('SelectvaluTime') != null
        ) {
          Selectvalue.value = cache.getCache('Selectvalue')
          getPageData({
            type: cache.getCache('Selectvalue'),
            classify: cache.getCache('SelectvalueOne'),
            thatVeryDay: cache.getCache('SelectvalueTime')
          })
        } else {
          getPageData({
            type: Selectvalue.value,
            classify: SelectvalueOne.value,
            thatVeryDay: dayjs().format('YYYY-MM-DD hh:mm:ss')
          })
        }
      } else if (props.pageName == 'evaluate') {
        if (cache.getCache('Selectvalue') != null) {
          Selectvalue.value = cache.getCache('Selectvalue')
          getPageData({
            type: cache.getCache('Selectvalue')
          })
        } else {
          getPageData({ type: 0 })
        }
      } else {
        getPageData()
      }
    })
    watch(Selectvalue, () => {
      cache.setCache('Selectvalue', Selectvalue.value)
      getPageData({
        type: Selectvalue.value,
        classify: SelectvalueOne.value,
        thatVeryDay: SelectvalueTime.value
      })
    })
    watch(SelectvalueOne, () => {
      cache.setCache('SelectvalueOne', SelectvalueOne.value)
      getPageData({
        type: Selectvalue.value,
        classify: SelectvalueOne.value,
        thatVeryDay: SelectvalueTime.value
      })
    })
    watch(SelectvalueTime, () => {
      console.log(SelectvalueTime.value)
      cache.setCache('SelectvalueTime', SelectvalueTime.value)
      getPageData({
        type: Selectvalue.value,
        classify: SelectvalueOne.value,
        thatVeryDay: SelectvalueTime.value
      })
    })
    //从vuex里面拿到数据
    const dataList = computed(() =>
      // 调用vuex里面的getters 调用地址为 system模块下pageListData 下的一个匿名方法且传入一个值
      store.getters[`system/pageListData`](props.pageName)
    )
    const listCount = computed(() =>
      store.getters[`system/pageListCount`](props.pageName)
    )
    //动态获取插槽名
    //filter 过滤数据 名字等于status.. 的不会进入数组  其他的都是进入
    const otherPropsSlots = props.contentTableConfig?.propList.filter(
      (item: any) => {
        if (item.slotName == 'create_time') {
          return false
        }
        if (item.slotName == 'updateTiem') {
          return false
        }
        if (item.slotName == 'handler') {
          return false
        }

        if (item.slotName == 'thatVeryDay') {
          return false
        }
        if (item.slotName == 'year_start_time') {
          return false
        }
        if (item.slotName == 'year_end_time') {
          return false
        }
        return true
      }
    )
    //新建数据
    const handelNewClick = () => {
      console.log('在pagecuont中触发')
      emit('newBtnClick')
    }
    //编辑数据
    const handelEditClick = (event: any) => {
      emit('editBtnClick', event)
    }
    //删除数据的方法
    const handeldeleteClick = (item: any) => {
      store.dispatch('system/delectPageDataAction', {
        pageName: props.pageName,
        id: item.id
      })
    }
    //修改的方法
    const handelRoterClick = async (item: any) => {
      // store.dispatch('system/delectPageDataAction', {
      //   pageName: props.pageName,
      //   id: item.id
      // })
      const item1 = item
      // console.log(item1)

      await setTimeout(() => {
        router.push({
          name: 'news',
          params: item1
        })
      }, 500)
    }
    return {
      handelRoterClick,
      pageInfo,
      dataList,
      listCount,
      handelEditClick,
      handelNewClick,
      getPageData,
      otherPropsSlots,
      handeldeleteClick,
      MyEdshow,
      MyDeshow,
      MyisCreate,
      MyisSelect,
      MyselectOptions,
      MyisSelectOne,
      MyselectOptionsOne,
      MyisSelectTime,
      Myisactions,
      Selectvalue,
      SelectvalueOne,
      SelectvalueTime
    }
  }
})
</script>

<style scoped lang="less">
.page-content {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
.header {
  div {
    margin: 0 5px;
  }
}
</style>
